import React, { PureComponent } from 'react';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Select, InputNumber } from 'antd';
import colors from '../../../css/colors';
const redColor = colors.debtAndProfit.text[0];
const plusColor = colors.debtAndProfit.text[5];
import myStyles from './style.less';
const { Option } = Select;
import { connect } from 'dva';

@Form.create()
@connect(({ BaselineInformationNewM }) => ({ BaselineInformationNewM }))
export default class benchComponents extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    // 获取复合的基准构成下拉数据
    this.props.dispatch({
      type: 'BaselineInformationNewM/benchmarkComponents',
      payload: {
        keyWord: '',
        includeBench: 1,
      },
    });
    // 获取其他类型的基准构成下拉数据
    this.props.dispatch({
      type: 'BaselineInformationNewM/benchmarkComponents',
      payload: {
        keyWord: '',
        includeBench: 0,
      },
    });
  }
  //基准成分下拉框进入查询
  benchComponentsFocus = (value) => {
    this.props.dispatch({
      type: 'BaselineInformationNewM/benchmarkComponents',
      payload: {
        keyWord: value ? value : '',
        includeBench: this.props.type == '复合' ? 1 : 0,
      },
    });
  };

  render() {
    // 基准构成下拉框的data
    const {
      BaselineInformationNewM: { benchComponents, complexData },
      onChange,
      value,
      disabled,
      type,
      isEdit,
    } = this.props;
    const handleAdd = () => {
      onChange([...value, { key: new Date().getTime(), weight: '', wind: '' }]);
    };

    const handleDelete = (key) => {
      if (value.length < 2 || disabled) return;
      onChange(value.filter((it) => it.key !== key));
    };
    // 基准构成change事件
    const handleOnChange = (e, key, type) => {
      onChange(
        value.map((item) => {
          if (item.key === key) {
            return { ...item, [type]: e };
          }
          return item;
        }),
      );
    };
    // 复合类型change事件
    const complexOnChange = (e, key, type) => {
      // let resultValue = [];
      if (e.indexOf('【自定义】') != -1) {
        // 选中数据为自定义子基准
        onChange(
          value.map((item) => {
            if (item.key === key) {
              return {
                ...item,
                ['benchId']: e,
                ['wind']: undefined,
              };
            }
            return item;
          }),
        );
      } else {
        onChange(
          value.map((item) => {
            if (item.key === key) {
              return {
                ...item,
                [type]: e,
                ['benchId']: undefined,
              };
            }
            return item;
          }),
        );
      }
    };
    return (
      <>
        {type == '单一' || type == '自定义' ? (
          <Row>
            <div style={{ width: '88.88%' }}>
              <Select
                allowClear
                showSearch
                filterOption={false}
                value={value[0].wind}
                disabled={isEdit == 'check' ? true : false}
                onFocus={this.benchComponentsFocus}
                onSearch={this.benchComponentsFocus}
                onChange={(e) => handleOnChange(e, 1, 'wind')}
              >
                {benchComponents.map((item) => {
                  return (
                    <Option key={item.value} value={item.value} title={`${item.title}-${item.value}`}>
                      {`${item.title}-${item.value}`}
                    </Option>
                  );
                })}
              </Select>
            </div>
          </Row>
        ) : (
          <div className={myStyles.fatherBox}>
            <div
              style={{
                maxHeight: '135px',
                overflow: 'auto',
                width: value && value.length > 3 ? '362px' : '100%',
              }}
            >
              {type == '市值加权' ? (
                <div>
                  {value.map((item, index) => {
                    return (
                      <Row style={{ display: 'flex' }} key={item.key}>
                        <div style={{ width: '88.88%' }}>
                          <Select
                            allowClear
                            showSearch
                            disabled={isEdit == 'check' ? true : false}
                            filterOption={false}
                            value={item.wind}
                            style={{ width: '100%' }}
                            onFocus={this.benchComponentsFocus}
                            onSearch={this.benchComponentsFocus}
                            onChange={(e) => handleOnChange(e, item.key, 'wind')}
                          >
                            {benchComponents.map((item) => {
                              return (
                                <Option key={item.value} value={item.value} title={`${item.title}-${item.value}`}>
                                  {`${item.title}-${item.value}`}
                                </Option>
                              );
                            })}
                          </Select>
                        </div>
                        <div>
                          {value && value.length > 1 ? (
                            <MinusCircleOutlined
                              style={{ margin: '10px 0 0 10px', color: isEdit == 'check' ? '' : redColor }}
                              onClick={isEdit == 'check' ? () => {} : () => handleDelete(item.key)}
                            />
                          ) : (
                            ''
                          )}
                        </div>
                      </Row>
                    );
                  })}
                </div>
              ) : (
                // 复合
                <div style={{ width: '100%' }}>
                  {value.map((item, index) => {
                    return (
                      <Row style={{ display: 'flex' }} key={item.key}>
                        <div style={{ width: '88.88%', display: 'flex' }}>
                          <div style={{ width: '40%', marginRight: '5%' }}>
                            <div className={myStyles.content}>
                              <InputNumber
                                max={100}
                                min={0}
                                value={item.weight}
                                precision={2}
                                disabled={isEdit == 'check' ? true : false}
                                style={{ width: `calc(100% - 38px)` }}
                                onChange={(e) => handleOnChange(e, item.key, 'weight')}
                              />
                              <div style={{ display: 'inline', marginLeft: '12px', marginRight: '12px', marginTop: '-3px' }}>%</div>
                            </div>
                          </div>
                          <Select
                            allowClear
                            showSearch
                            filterOption={false}
                            value={item.benchId ? item.benchId : item.wind}
                            disabled={isEdit == 'check' ? true : false}
                            style={{ width: '55%' }}
                            onFocus={this.benchComponentsFocus}
                            onSearch={this.benchComponentsFocus}
                            onChange={(e) => complexOnChange(e, item.key, 'wind')}
                          >
                            {complexData?.map((item) => {
                              return (
                                <Option key={item.value} value={item.value} title={item.title}>
                                  {item.title}
                                </Option>
                              );
                            })}
                          </Select>
                        </div>
                        <div>
                          {value && value.length > 1 ? (
                            <MinusCircleOutlined
                              style={{ margin: '10px 0 0 10px', color: isEdit == 'check' ? '' : redColor }}
                              onClick={isEdit == 'check' ? () => {} : () => handleDelete(item.key)}
                            />
                          ) : (
                            ''
                          )}
                        </div>
                      </Row>
                    );
                  })}
                </div>
              )}
            </div>
            <PlusCircleOutlined onClick={isEdit == 'check' ? () => {} : handleAdd} style={{ color: isEdit == 'check' ? '' : plusColor }} />
          </div>
        )}
      </>
    );
  }
}
